<template>
  <div class="wty-shop-menu">
    <div class="wty-menu-goods" v-for="(good, index1) in goods" :key="index1">
      <h1>{{ good.title }}</h1>
      <div class="wty-goods-list-wrapper">
        <div
          class="wty-goods-list"
          v-for="(item, index2) in good.list"
          :key="index2"
        >
          <div class="wty-goods-list-img-wrapper">
            <img :src="item.imgSrc" alt="" />
          </div>
          <h2>{{ item.name }}</h2>
          <p class="zan">赞{{ item.ok }}</p>
          <p class="yuan">￥{{ item.price }}</p>
          <div class="wty-goods-list-ball-wrapper">
            <WtyBall
              :count="item.count"
              @addCount="_addCount(index1, index2)"
              @minusCount="_minusCount(index1, index2)"
            ></WtyBall>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import WtyBall from "@/components/shop/ball/wty-ball.vue";
export default {
  props: {
    goods: {
      type: Array,
      default: function() {
        return [];
      }
    } // 接收数据 调menu组件时往里面传值，传给goods
  },
  methods: {
    _addCount(index1, index2) {
      this.$emit("addCount", index1, index2);
    },
    _minusCount(index1, index2) {
      this.$emit("minusCount", index1, index2);
    }
  },
  components: {
    WtyBall
  }
};
</script>

<style lang="scss" scoped>
.wty-menu-goods {
  widows: 100%;
  h1 {
    margin-top: 14px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #000;
    padding-left: 19px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(7, 17, 27, 0.1);
    background-color: #fff;
  }
  .wty-goods-list-wrapper {
    display: flex;
    flex-wrap: wrap;
    .wty-goods-list {
      position: relative;
      flex: 0 0 220px;
      width: 220px;
      box-sizing: border-box;
      background-color: white;
      border-right: 1px dashed rgba(7, 17, 27, 0.1); // 虚线dashed 实线solid
      border-bottom: 1px dashed rgba(7, 17, 27, 0.1);
      &:nth-child(3n-2) {
        border-left: 1px dashed rgba(7, 17, 27, 0.1);
      }
      .wty-goods-list-img-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      h2 {
        text-indent: 19px;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        font-weight: 700;
        margin: 5px 0; // 上下5px 左右为0
      }
      .zan {
        font-size: 12px;
        color: #666;
        height: 20px;
        height: 20px;
        line-height: 20px;
        text-indent: 19px;
        margin: 5px 0;
      }
      .yuan {
        text-indent: 19px;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        font-weight: 700;
        margin: 5px 0;
        color: red;
      }
      .wty-goods-list-ball-wrapper {
        position: absolute;
        right: 10px;
        bottom: 10px;
        width: 90px;
        height: 30px;
      }
    }
  }
}
</style>
